<template>
	<view class="guild">
		<view class="nav_bar" style="background: linear-gradient( 179deg, #D5BBFF 0%, #E7DBFD 100%);">
			<uni-nav-bar :rightText="guildData.guild_auth == 1 ? '申请开厅' : ''" color="#333" left-icon="left" title="公会管理"
				:border='false' :fixed="true" background-color="transparent" @clickRight="toOpenLive"
				@clickLeft="$util.back()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>

		<view class="guildCard flex_center">
			<view class="avatar_box flex_r_around">
				<image class="avatar" :src="guildData.guild_info.logo" v-if="guildData.guild_info"></image>
				<image class="avatar_border" :src="$util.prefix('guild/avatar_border.png')">
				</image>
			</view>

			<view class="info">
				<view class="name" v-if="guildData.guild_info">{{guildData.guild_info.guild_name}}</view>
				<view class="id" v-if="guildData.guild_info">ID:{{guildData.guild_info.id}}</view>
				<view class="num" v-if="guildData.guild_info">总人数：{{ guild_total }}人</view>
			</view>
		</view>

		<view class="wallet_card">
			<view class="header flex_center">
				<view class="header_item flex_center">
					<image src="/static/guild/wallet_icon.png"></image>
					<text>数据统计</text>
				</view>
				<!-- <view class="header_item flex_r_between header_grey"
					@click="toGuildIncomeCenter">
					<image src="/static/guild/income_icon.png"></image>
					<text>收益统计</text>
				</view> -->

				<!-- <view class="rich-text flex_center" @click="$util.toUrl(`/pages/guild/rich`)">
					<text>收益比例&流量扶持</text>
					<u-icon name="question-circle" color="#3D3D3D" size="28rpx"></u-icon>
				</view> -->
			</view>

			<view class="wallet_num flex_center">
				<!-- <view class="item"
					@click="$util.toUrl(`/pages/guild/income/guildIncome?guild_id=${guildData.guild_info.id}&circle_id=${circle_id}`)">
					<text>礼物收益(元)</text>
					<view>{{Number(guildData.gift_ie || '0.00').toFixed(2)}}</view>
				</view> -->

				<!-- @click="$util.toUrl('/pages/guild/broadcasting/guild')" -->
				<view class="item">
					<text>开播时长(分钟)</text>
					<!-- D: 除 60 返回秒 计算分钟 -->
					<view>
						{{guildData.open_live_time != 0 && guildData.open_live_time ? Number(guildData.open_live_time / 60).toFixed(0) : 0}}
					</view>
					<!-- @click="$util.toUrl('/pages/guild/game/guildgame')" -->
					<!-- <text>游戏(局)</text>
					<view>{{guildData.game_num || 0}}</view> -->
				</view>

				<view class="item">

				</view>

			</view>

			<!-- <view class="wallet_num flex_center" style="margin-top: 0;">
				<view class="item">
					<text>观看时长(分钟)</text>
					<view>{{guildData.video_num || 0}}</view>
				</view>

				<view class="item" @click="$util.toUrl(`/pages/guild/article/guildarticle?guild_id=${guildData.guild_info.id}`)">
					<text>作品(条)</text>
					<view>{{guildData.article_num || 0}}</view>
				</view>

				<view class="item">
					<text>发送/回复(条)</text>
					<view>{{guildData.receive_num || 0}}</view>
				</view>

			</view> -->
		</view>

		<view class="content">
			<view class="tab flex_center">
				<!-- <view @click="onTab(1)" :id="tab == 1 ? 'select' : ''">每周任务</view> -->
				<view @click="onTab(2)" :id="tab == 2 ? 'select' : ''">公会成员</view>
				<view @click="onTab(3)" :id="tab == 3 ? 'select' : ''">公会房间</view>
				<view @click="onTab(4)" :id="tab == 4 ? 'select' : ''">排行榜</view>
				<view @click="onTab(5)" :id="tab == 5 ? 'select' : ''">申请加入</view>
			</view>

			<!-- <view class="week_task" v-if="tab == 1">
				<view class="header flex_center">
					<text>日期</text>
					<text>作品</text>
					<text>游戏</text>
				</view>
				<view class="tr flex_center" v-for="(item,index) in task" :key="index">
					<text>{{item.week_name}}</text>
					<text>{{item.article_num}}</text>
					<text class="no">{{item.game_num}}</text>
				</view>
			</view> -->

			<view class="people_list" v-if="tab == 2">
				<view class="input_content flex_r_between">
					<input type="text" v-model="mobile" placeholder="请输入用户ID/手机号"
						placeholder-class="placeholder_class" />
					<view class="btn" @click="onInvite">邀请成员</view>
				</view>
				<view class="online_num flex_r_between">
					<text>在线人数</text>
					<view>{{onlineTotal}}/{{total}}</view>
				</view>
				<view class="list">
					<view style="background: #FFF;" v-if="!people_list.length && total == 0">
						<empty></empty>
					</view>
					<view style="background: #FFF;" v-if="!people_list.length && total == 1">
						<loading></loading>
					</view>
					<view class="item flex_center" v-for="(item,index) in people_list" :key="index"
						@click="$native.toUser(item.provider_id)">
						<view class="left flex_center">
							<view class="avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
								<view v-if="item.online == 0"></view>
							</view>
							<view class="name">
								<view class="hidden">{{item.nickname}}</view>
								<text>{{
									item.auth == 1 ? '公会长'
									: item.auth == 2 ? '厅管'
									: item.auth == 4 ? '公会管理'
									: '主播'
								}}</text>
							</view>
						</view>
						<view class="right flex_center">
							<text>{{item.online == 0 ? '在线' : '离线'}}</text>
							<image src="/static/guild/more.png" @click.stop="onDetele(item)" v-if="item.auth != 1">
							</image>
							<view class="btn_icon" v-else></view>
						</view>
					</view>
				</view>
			</view>

			<view class="house_list" v-if="tab == 3">
				<view style="background: #FFF;" v-if="!house_list.length && total == 0">
					<empty></empty>
				</view>
				<view style="background: #FFF;" v-if="!house_list.length && total == 1">
					<loading></loading>
				</view>
				<u-swipe-action>
					<u-swipe-action-item :options="[{
						text: '下播',
						style: {
							backgroundColor: '#FD2A53',
						}
					}]" v-for="(item,index) in house_list" :key="index" @click="setEndLive(item)">
						<view class="item flex_r_between" :key="index" @click="readyLive(item.id)">
							<view class="live_info flex_center">
								<image :src="item.cover_img" mode="aspectFill" class="cover"></image>
								<view class="name">
									<view class="house_name hidden">{{item.name}}</view>
									<view class="people_num hidden">观众{{item.watch_count}}人</view>
									<view class="people_num hidden">厅管:{{getOwner(item.owner_list)}}</view>
								</view>
							</view>
							<view class="status">{{
						item.open_status == 1 ? '开播中' : '未开播'
					}}</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>

			<view class="rank" v-if="tab == 4">

				<view class="rank_tab flex_r_between">
					<view class="rank_tab_item" @click="onRankTab(1)" :id="rank_tab == 1 ? 'select' : ''">小时榜</view>
					<view class="rank_tab_item" @click="onRankTab(2)" :id="rank_tab == 2 ? 'select' : ''">日榜</view>
					<view class="rank_tab_item" @click="onRankTab(3)" :id="rank_tab == 3 ? 'select' : ''">周榜</view>
					<view class="rank_tab_item" @click="onRankTab(4)" :id="rank_tab == 4 ? 'select' : ''">指定时间</view>
				</view>

				<view class="time_box flex_r_between" v-if="rank_tab == 4">
					<view class="time_item" @click="start_show = true">
						<uni-dateformat :date="start" format="yyyy-MM-dd" v-if="start"></uni-dateformat>
						<text v-else>起始时间</text>
					</view>
					<view class="line"></view>
					<view class="time_item" @click="onEnd">
						<uni-dateformat :date="end" format="yyyy-MM-dd" v-if="end"></uni-dateformat>
						<text v-else>截止时间</text>
					</view>
				</view>


				<view class="tags flex_r_between">
					<view class="tags_item flex_center">
						<text @click="onTagsTab(1)" :id="tags_tab == 1 ? 'select' : ''">主播榜</text>
						<text @click="onTagsTab(2)" :id="tags_tab == 2 ? 'select' : ''">房间榜</text>
					</view>
					<view class="time flex_center" v-if="rank_tab != 4">
						<u-count-down :time="diff_time * 1000" format="HH:mm:ss" @finish="onFinish"></u-count-down>
						<i> 后结榜</i>
					</view>
				</view>

				<view class="rank_people" v-if="tags_tab == 1">
					<view class="rank_people_item flex_r_between" v-for="(item,index) in rank" :key="index"
						@click="toRankLive(item)">
						<view class="left flex_center">
							<view class="rank_index">
								{{ index+1 }}
							</view>
							<view class="avatar flex_r_around">
								<image :src="item.avatar" mode="aspectFill"></image>
								<view class="lottie" v-show="item.open_status == 1">
									<c-lottie ref="cLottieRef" :src='src' width="150rpx" height='150rpx'
										:loop="true"></c-lottie>
								</view>
							</view>
							<view class="nickname">
								<view class="name hidden">{{ item.nickname }}</view>
								<view class="info flex_center">
									<view class="gender">
										<u-icon name="man" size="24rpx" color="#4CD4FF"
											v-if="item.gender == 1"></u-icon>
										<u-icon name="woman" size="24rpx" color="#FD2A53" v-else></u-icon>
									</view>
									<view class="age">{{ item.age }}</view>
									<view class="address hidden">{{ item.city || '' }}{{ item.area || '' }}</view>
								</view>
							</view>
						</view>
						<view class="right">
							{{ item.all_price }}
						</view>
					</view>
				</view>

				<view class="rank_people" v-if="tags_tab == 2">
					<view class="rank_people_item flex_r_between" v-for="(item,index) in rank" :key="index"
						@click="readyLive(item.open_rid)">
						<view class="left flex_center">
							<view class="rank_index">
								{{ index + 1 }}
							</view>
							<view class="avatar flex_r_around">
								<image :src="item.cover_img" mode="aspectFill"></image>
								<view class="lottie" v-show="item.open_status == 1">
									<c-lottie ref="cLottieRef" :src='src' width="150rpx" height='150rpx'
										:loop="true"></c-lottie>
								</view>
							</view>
							<view class="nickname">
								<view class="name hidden">{{ item.name }}</view>
							</view>
						</view>
						<view class="right">
							{{ item.all_price }}
						</view>
					</view>
				</view>

				<view style="background: #FFF;" v-if="!rank.length">
					<empty></empty>
				</view>

			</view>

			<view class="apply" v-if="tab == 5">
				<view style="background: #FFF;" v-if="!apply_list.length && total == 0">
					<empty></empty>
				</view>
				<view style="background: #FFF;" v-if="!apply_list.length && total == 1">
					<loading></loading>
				</view>

				<view class="item flex_r_between" v-for="(item,index) in apply_list" :key="index">
					<view class="left">
						<view class="flex_center">
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
							<view>
								<view class="top flex_center">
									<text class="hidden">{{ item.nickname }}</text>
								</view>
								<view class="bottom flex_center">
									<image :src="$util.prefix(`public/sex_${item.gender}_no_bg.png`)" mode="aspectFill">
									</image>
									<text class="hidden">{{ item.age }}</text>
									<text class="hidden" style="max-width: 200rpx;">{{ item.location }}</text>
								</view>
							</view>
						</view>

					</view>

					<view class="right flex_center">
						<view class="red" @click="dealMemberApply(item,3)">拒绝</view>
						<view class="green" @click="dealMemberApply(item,2)">同意</view>
					</view>
				</view>


			</view>

		</view>

		<u-popup :show="show" mode="center" bgColor="transparent" @close="show = false" :safeAreaInsetBottom="false">
			<view class="invite_content">
				<view class="header">请确认邀请人信息</view>
				<view class="user_info flex_center">
					<image :src="invite_user.avatar" mode="aspectFill" class="avatar"></image>
					<view class="info">
						<view class="nickname">{{invite_user.nickname}}</view>
						<view class="tags flex_center">
							<image src="/static/guild/sex_women_red.png"></image>
							<view class="age">{{invite_user.age}}</view>
							<view class="city">{{invite_user.city}}</view>
						</view>
					</view>
				</view>
				<view class="btn_box flex_r_between">
					<view class="cancel" @click="show = false">取消</view>
					<view class="submit" @click="onInviteSubmit">提交</view>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :actions="list" :show="sheet_show" cancelText="取消" @close="sheet_show = false"
			@select="onSelect">
		</u-action-sheet>

		<u-popup :show="end_live" mode="center" bgColor="transparent" @close="end_live = false"
			:safeAreaInsetBottom="false">
			<view class="invite_content">
				<view class="header">请确认是否解散房间</view>
				<view class="user_info flex_center">
					<image :src="end_live_info.cover_img" mode="aspectFill" class="avatar"></image>
					<view class="info">
						<view class="nickname hidden">{{ end_live_info.name }}</view>
					</view>
				</view>
				<view class="btn_box flex_r_between">
					<view class="cancel" @click="end_live = false">取消</view>
					<view class="submit" @click="onSubmitEndLive">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 主播开播提醒 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="toast" @close="toast = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="toast flex_c">
					<view class="toast_title">主播平台规范</view>

					<view class="scroll">
						<scroll-view scroll-y="true">
							<view class="title">一、前言</view>
							<view class="text">
								为了维护直播平台的健康、文明、安全的网络环境，保障广大用户的合法权益，本公约特制定以下规定，旨在明确禁止主播及用户在平台上进行赌博、涉黄、诈骗等一切非法活动。所有主播和用户必须严格遵守国家法律法规以及平台的相关规定，共同营造一个积极向上的直播氛围。
							</view>
							<br />

							<view class="title">二、严禁赌博行为</view>
							<br />
							<view class="h">趣味抽奖游戏规范：</view>
							<view class="text">
								1、主播在直播中不得组织或参与任何形式的赌博活动，包括但不限于趣味抽奖游戏，若游戏中涉及用户付费参与且奖品价值具有不确定性，需事先向平台报备并获得批准。</view>
							<view class="text">2、禁止主播与用户之间或用户相互之间通过抽奖游戏进行变相赌博，如将抽中的礼物私下转卖或回购，此行为视为赌博行为的延伸，一经发现，将严肃处理。
							</view>
							<view class="text">3、主播应明确告知用户抽奖活动的规则、奖品设置及中奖概率，确保活动透明、公正。</view>
							<br />
							<view class="h">礼物交易规范：</view>
							<view class="text">1、主播不得诱导、鼓励用户将抽中的礼物进行私下交易或转卖，所有礼物均应在平台内进行合法流转。</view>
							<view class="text">2、若发现主播与用户之间存在违规礼物交易行为，平台将依据情节轻重采取警告、封号等措施。</view>
							<br />

							<view class="title">三、严禁涉黄行为</view>
							<view class="text">
								主播应自觉抵制并拒绝任何形式的色情、低俗内容，包括但不限于展示裸照、进行低俗表演等。主播在直播中不得使用任何涉及性暗示、性挑逗的言辞或行为，维护网络环境的纯洁性。</view>
							<br />

							<view class="title">四、严禁诈骗行为</view>
							<br />
							<view class="h">情感诈骗：</view>
							<view class="text">主播不得以建立感情关系为手段，诱使用户赠送大量礼物或进行其他形式的消费。主播应真诚对待每一位用户，不得利用用户的信任或情感需求进行欺诈。
							</view>
							<br />
							<view class="h">裸照诈骗：</view>
							<view class="text">主播不得以承诺发送裸照为诱饵，骗取用户赠送礼物或进行其他形式的付费行为。
								严禁主播在任何情况下向用户发送或要求用户发送裸照，此行为严重违反平台规定及法律法规。</view>
							<br />
							<view class="h">其他诈骗手段：</view>
							<view class="text">1、主播不得虚构事实、隐瞒真相，以非法占有为目的，骗取用户财物。</view>
							<view class="text">2、对于任何形式的诈骗行为，平台将采取零容忍态度，一经查实，立即封号并移送司法机关处理。</view>

							<br />
							<view class="title">五、违规处理</view>
							<view class="text">1、对于违反本公约的主播，平台将根据违规情节的严重程度，采取包括但不限于警告、限制直播功能、扣除信用分、冻结账号、永久封禁等处罚措施。
							</view>
							<view class="text">2、情节严重者，平台将保留追究其法律责任的权利，并积极配合相关部门进行调查处理。</view>

							<br />
							<view class="title">六、附则</view>
							<view class="text">本公约自发布之日起生效，平台保留对本公约进行修订的权利，修订内容将在平台上进行公示。
								用户及主播在使用平台服务过程中，应自觉遵守本公约及平台其他相关规定，共同维护良好的直播环境</view>

						</scroll-view>
					</view>

					<view class="toast_btn flex_r_around white_btn" v-if="time > 0">
						<text>{{ time }}s 后确认</text>
					</view>

					<view class="toast_btn flex_r_around red_btn" v-else @click="toOpen">
						<text>确认已阅读</text>
					</view>

				</view>
			</u-popup>
		</view>

		<u-datetime-picker :show="start_show" mode="date" :maxDate="now" :closeOnClickOverlay="true"
			@close="start_show = false" @cancel="start_show = false" @confirm="confirmStart">
		</u-datetime-picker>

		<u-datetime-picker :maxDate="now" :minDate="start" :show="end_show" mode="date" :closeOnClickOverlay="true"
			@close="end_show = false" @cancel="end_show = false" @confirm="confirmEnd">
		</u-datetime-picker>


	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	import loading from '@/pages/guild/components/loading/loading.vue';
	export default {
		components: {
			empty,
			loading
		},
		data() {
			return {
				tab: 2,

				// 要请员工的手机号
				mobile: '',

				show: false,

				page: 1,
				total: 1,
				// 在线人数
				onlineTotal: 0,
				people_list: [],
				house_list: [],
				apply_list: [],


				invite_user: {},

				user: {},

				guildData: {},

				// 每周任务
				task: [],

				// 选择框
				sheet_show: false,
				title: '标题',
				list: [{
						name: '设置公会管理', // 开启后文字不显示
					},
					{
						name: '踢出', // 开启后文字不显示
					},
				],

				delete_item: {},

				guild_total: 0,

				rank_tab: 1,
				tags_tab: 1,
				src: 'https://qiniu-cdn.maeiyun.com//lottie/data.json',
				diff_time: 1000000,
				rank: [],
				rankPage: 1,
				rankTotal: 1,

				end_live: false,
				end_live_info: {},

				toast: false,

				time: 3,
				timer: null,
				to_live_rid: 0,

				circle_id: 0,

				start_show: false,
				end_show: false,

				start: 0,
				end: 0,
				now: 0,
			}
		},
		methods: {

			preventHandler() {
				return;
			},

			// tab 切换
			onTab(e) {
				this.tab = e;
				if (this.tab == 1) {

				}
				if (this.tab == 2) {
					this.page = 1;
					this.total = 1;
					this.people_list = [];
					this.getGuildMember();
				}
				if (this.tab == 3) {
					this.page = 1;
					this.total = 1;
					this.house_list = [];
					this.getHouseList();
				}

				if (this.tab == 4) {
					this.rankPage = 1;
					this.rankTotal = 1;
					this.rank = [];
					this.getRank();
				}

				if (this.tab == 5) {
					this.page = 1;
					this.total = 1;
					this.apply_list = [];
					this.getApply();
				}
			},

			// 邀请主播
			onInvite() {
				this.$post('/guild_member/shareMember', {
					mobile: this.mobile,
					circle_id: this.circle_id
				}).then(res => {
					this.invite_user = res.data;
					this.show = true;
				})
			},

			onInviteSubmit() {
				this.$post('/guild_member/shareMember', {
					user_id: this.invite_user.id,
					is_verify: 1,
					mobile: this.invite_user.mobile,
					circle_id: this.circle_id
				}).then(res => {
					this.$util.msg(res.msg);
					this.show = false;
				})
			},

			getData() {
				this.user = uni.getStorageSync('user');
				this.$get('/guild/getGuildData', {
					user_id: this.user.id,
					auth: 1,
					circle_id: this.circle_id
				}).then(res => {
					this.guildData = res.data
				})
			},

			getUser() {
				this.user = uni.getStorageSync('user');
				this.getData();
			},

			// 获取公会成员
			getGuildMember() {
				this.$get('/guild_member/index', {
					type: 1,
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					uni.stopPullDownRefresh();
					this.total = res.data.list.total;
					this.guild_total = res.data.list.total;
					this.onlineTotal = res.data.online_num;
					this.people_list.push(...res.data.list.data)
				})
			},

			// 删除成员
			removeMember(e) {
				this.$post('/guild_member/removeMember', {
					user_id: e,
					circle_id: this.circle_id
				}).then(res => {
					this.page = 1;
					this.total = 0;
					this.people_list = [];
					this.getGuildMember();
				})
			},

			// 获取每周任务
			getTask() {
				this.$get('/guild_data/task', {
					circle_id: this.circle_id
				}).then(res => {
					this.task = res.data;
				})
			},

			getHouseList() {
				this.$get('/guild/getGuildRoom', {
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					uni.stopPullDownRefresh();
					this.total = res.data.total;
					this.house_list.push(...res.data.data);
				})
			},

			getOwner(list) {
				var arr = [];
				list.forEach(item => {
					arr.push(item.nickname);
				});
				return arr.join(',');
			},

			toOpenLive() {
				if (this.guildData.guild_auth != 1) {
					return;
				}
				this.$util.toUrl(
					`/pages/guild/openLive?guild_id=${this.guildData.guild_info.id}&circle_id=${this.circle_id}`);
			},

			onDetele(item) {
				this.sheet_show = true;
				this.delete_item = item;

				if (this.delete_item.auth == 4) {
					this.list[0].name = '取消公会管理'
				} else {
					this.list[0].name = '设置公会管理'
				}
			},

			// 踢出主播
			onSelect(e) {
				if (e.name == '踢出') {
					this.$post('/guild_member/removeMember', {
						user_id: this.delete_item.id,
						circle_id: this.circle_id
					}).then(res => {
						this.page = 1;
						this.total = 0;
						this.people_list = [];
						this.getGuildMember();
					})
				} else {
					var status = this.delete_item.auth == 4 ? 2 : 1;
					this.$get('/guild.guildMemberApply/setGuildManage', {
						guild_id: this.guildData.guild_info.id,
						status: status,
						member_uid: this.delete_item.id
					}).then(res => {
						this.$util.msg(res.msg);
						this.page = 1;
						this.total = 1;
						this.people_list = [];
						this.getGuildMember();
					});
				}
			},

			onRankTab(e) {
				if (this.rank_tab == e) {
					return;
				}
				this.rank_tab = e;
				this.rankPage = 1;
				this.rankTotal = 1;
				this.diff_time = 10000;
				this.rank = [];
				this.getRank();
			},

			onTagsTab(e) {
				if (this.tags_tab == e) {
					return;
				}
				this.tags_tab = e;
				this.rankPage = 1;
				this.rankTotal = 1;
				this.rank = [];
				this.getRank();
			},

			getRank() {
				var start = 0;
				var end = 0;
				if (this.start != 0 && this.end != 0) {
					start = Number(this.start / 1000).toFixed(0);
					end = Number(this.end / 1000).toFixed(0);
				}

				if (this.tags_tab == 1) {
					this.$get('/room_data/getRoomIncomeRank', {
						type: this.rank_tab,
						guild_id: this.guildData.guild_info.id,
						circle_id: this.circle_id,
						start: start,
						end: end,
					}, true, (res => {
						uni.stopPullDownRefresh();
					})).then(res => {
						// this.rankTotal = res.data.total;
						this.diff_time = res.data.diff_time;
						this.rank.push(...res.data.list);
						uni.stopPullDownRefresh();
					})
				} else {
					this.$get('/room_data/getRoomRank', {
						type: this.rank_tab,
						guild_id: this.guildData.guild_info.id,
						circle_id: this.circle_id,
						start: start,
						end: end,
					}, true, (res => {
						uni.stopPullDownRefresh();
					})).then(res => {
						// this.rankTotal = res.data.total;
						this.diff_time = res.data.diff_time;
						this.rank.push(...res.data.list);
						uni.stopPullDownRefresh();
					})
				}
			},

			onFinish() {
				if (this.rank_tab != 4) {
					this.rankPage = 1;
					this.rankTotal = 1;
					this.rank = [];
					this.getRank();
				}
			},

			toRankLive(item) {
				if (item.open_status == 1) {
					this.readyLive(item.open_rid)
				}
			},

			setEndLive(item) {
				this.end_live_info = item;
				this.end_live = true;
			},

			onSubmitEndLive() {
				this.$get('/roomV2/setEndLive', {
					rid: this.end_live_info.id,
					type: 1,
					circle_id: this.circle_id
				}, true, (res) => {
					this.end_live = false;
				}).then(res => {
					this.end_live = false;
					if (this.tab == 3) {
						this.page = 1;
						this.total = 0;
						this.house_list = [];
						this.getHouseList();
					}
				});
			},

			readyLive(id) {
				this.to_live_rid = id;
				this.toast = true;
				this.time = 3;
				this.timer = setInterval(() => {
					this.time--;
					if (this.time <= 0) {
						clearInterval(this.timer);
					}
				}, 1000)
			},

			toOpen() {
				this.toast = false;
				this.$native.toLive(this.to_live_rid, this.circle_id, 6);
			},

			getApply() {
				this.$get('/guild.guildMemberApply/getMemberApplyList', {
					page: this.page,
					guild_id: this.guildData.guild_info.id || 0,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.total;
					this.apply_list.push(...res.data.data);
				});
			},

			dealMemberApply(item, status) {
				this.$get('/guild.guildMemberApply/dealMemberApply', {
					member_uid: item.user_id,
					guild_id: this.guildData.guild_info.id || 0,
					status: status,
					circle_id: this.circle_id,
				}).then(res => {
					this.$util.msg(res.msg);
					this.page = 1;
					this.total = 1;
					this.apply_list = [];
					this.getApply();
				});
			},

			toGuildIncomeCenter() {
				if (this.guildData.guild_auth != 1) {
					return
				}
				this.$util.toUrl(`/pages/guild/income/guildIncomeCenter?circle_id=${this.circle_id}`)
			},

			onEnd() {
				if (!this.start) {
					return this.$util.msg('请先选择开始时间')
				}
				this.end_show = true;
			},

			confirmStart(e) {
				this.start = e.value;
				this.start_show = false;
			},

			confirmEnd(e) {
				this.end = e.value;
				this.end_show = false;
				this.getRank();
			},

		},

		onPullDownRefresh() {
			if (this.tab == 2) {
				this.page = 1;
				this.total = 0;
				this.people_list = [];
				this.getGuildMember();
			}
			if (this.tab == 3) {
				this.page = 1;
				this.total = 0;
				this.house_list = [];
				this.getHouseList();
			}
			if (this.tab == 4) {
				this.rankPage = 1;
				this.rankTotal = 1;
				this.rank = [];
				this.getRank();
			}
			if (this.tab == 5) {
				this.page = 1;
				this.total = 1;
				this.apply_list = [];
				this.getApply();
			}
		},

		onLoad(option) {
			this.circle_id = option.circle_id || 0;
			this.now = new Date().getTime();
			this.start = new Date().getTime();
			this.end = new Date().getTime();
			this.getUser();
			this.getGuildMember();
		},

		onReachBottom() {
			if (this.tab == 2) {
				if (this.total > this.people_list.length) {
					this.page++;
					this.getGuildMember();
				}
			}
			if (this.tab == 3) {
				this.page++;
				if (this.total > this.house_list.length) {
					this.page++;
					this.getHouseList();
				}
			}

			if (this.tab == 5) {
				this.page++;
				if (this.total > this.apply_list.length) {
					this.page++;
					this.getApply();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.guild {
		min-height: 100vh;
		background: linear-gradient(179deg, #D5BBFF 0%, #E7DBFD 16%, #F2F2F5 100%);
		padding: 20rpx 32rpx;
	}

	.guildCard {
		height: 208rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/guild/guild_header_bg.png) 0 0 no-repeat;
		background-size: 100%;
		border-radius: 32rpx;
		padding: 0 18rpx;
		overflow: hidden;

		.avatar_box {
			width: 155rpx;
			height: 155rpx;
			position: relative;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				border-radius: 63rpx;
			}

			.avatar_border {
				width: 155rpx;
				height: 155rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.info {
			flex: 1;
			margin-left: 18rpx;

			.name {
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFB63;
			}

			.id {
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.num {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.wallet_card {
		background: linear-gradient(180deg, #FFF1DB 0%, #FFFFFF 29%, #FFFFFF 100%);
		border-radius: 32rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx 0;
		overflow: hidden;

		.header {
			.header_item {
				flex: 1;
				padding: 32rpx 32rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
				}
			}

			.header_grey {
				background: #F5F5F5;
			}
		}

		.wallet_num {
			padding: 0 24rpx 32rpx;
			margin-top: 20rpx;

			.item {
				// width: 33.33%;
				// margin-top: 10rpx;
				flex: 1;

				text {
					font-size: 28rpx;
					color: #666666;
				}

				view {
					font-weight: 600;
					font-size: 36rpx;
					color: #131313;
				}
			}
		}

	}

	.content {
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 32rpx 24rpx;

		.tab {
			margin-bottom: 26rpx;

			view {
				flex: 1;
				font-size: 28rpx;
				color: #B5A7D4;
				text-align: center;
			}

			#select {
				font-weight: 500;
				color: #6B37E2;
			}
		}

		.week_task {
			border-radius: 24rpx;
			overflow: hidden;
			border: 1rpx solid #FFCFED;

			.header {
				height: 64rpx;
				background: linear-gradient(113deg, #AF65FF 0%, #6A83FF 100%);
				border-radius: 24rpx 24rpx 0rpx 0rpx;

				text {
					flex: 1;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
			}

			.tr {
				text {
					border-top: 1rpx solid #FFCFED;
					border-right: 1rpx solid #FFCFED;
					flex: 1;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					font-size: 24rpx;
					color: #333333;
				}

				.no {
					border-right: 1rpx solid transparent;
				}
			}
		}

		.people_list {
			.input_content {
				height: 88rpx;
				margin: 20rpx 0 30rpx;
				background: #EEE7FF;
				border-radius: 48rpx;
				padding: 0 12rpx 0 46rpx;

				input {
					flex: 1;
				}

				.placeholder_class {
					font-weight: 400;
					font-size: 28rpx;
					color: #BBACE0;
				}

				.btn {
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient(137deg, #FD6AC7 0%, #FD98E2 100%);
					border-radius: 28rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
				}
			}

			.online_num {
				text {
					font-size: 28rpx;
					color: #666666;

				}

				view {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}
			}

			.list {
				.item {
					margin-top: 32rpx;

					.left {
						flex: 1;
						overflow: hidden;

						.avatar {
							width: 96rpx;
							height: 96rpx;
							position: relative;
							margin-right: 16rpx;

							image {
								width: 96rpx;
								height: 96rpx;
								border-radius: 48rpx;
							}

							view {
								width: 24rpx;
								height: 24rpx;
								background: #32E371;
								border: 2rpx solid #FFFFFF;
								position: absolute;
								right: 0;
								bottom: 0;
								border-radius: 12rpx;
							}
						}

						.name {
							flex: 1;
							overflow: hidden;

							view {
								font-weight: 500;
								font-size: 28rpx;
								color: #131313;
							}

							text {
								font-size: 24rpx;
								color: #666666;
							}
						}
					}

					.right {
						image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}

						.btn_icon {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}

						text {
							font-size: 28rpx;
							color: #666666;
						}
					}
				}
			}
		}

	}

	.invite_content {
		width: 560rpx;
		height: 404rpx;
		background: linear-gradient(180deg, #D5BBFF 0%, #E7DBFD 12%, #FFFFFF 28%);
		border-radius: 40rpx;
		padding: 40rpx 32rpx;

		.header {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.user_info {
			margin: 32rpx 0;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				border-radius: 64rpx;
				margin-right: 16rpx;
			}

			.info {
				flex: 1;

				.nickname {
					font-size: 28rpx;
					color: #131313;
					margin-bottom: 16rpx;
				}

				.tags {
					image {
						width: 32rpx;
						height: 32rpx;
					}

					.age {
						background: #FF8F26;
						border-radius: 24rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0 10rpx;
						text-align: center;
						margin-left: 8rpx;
					}

					.city {
						background: #A884FC;
						border-radius: 24rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						padding: 0 10rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		.btn_box {
			.cancel {
				width: 240rpx;
				height: 80rpx;
				background: #EEE7FF;
				border-radius: 50rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #6B37E2;
				line-height: 80rpx;
				text-align: center;
			}

			.submit {
				width: 240rpx;
				height: 80rpx;
				background: #6B37E2;
				border-radius: 50rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}

	.house_list {

		/deep/ .u-swipe-action-item__right__button__wrapper {
			margin-bottom: 20rpx;
		}

		.item {
			align-items: flex-start;
			background: #F9F9F9;
			border-radius: 24rpx;
			padding: 16rpx;
			margin-bottom: 20rpx;

			.live_info {
				flex: 1;
				overflow: hidden;

				.cover {
					width: 128rpx;
					height: 128rpx;
					background: #D8D8D8;
					border-radius: 24rpx;
					margin-right: 16rpx;
				}

				.name {
					overflow: hidden;
					flex: 1;

					.house_name {
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
					}

					.people_num {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.status {
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	.rank {

		.time_box {

			margin-top: 12rpx;

			.time_item {
				width: 312rpx;
				height: 60rpx;
				padding: 0 16rpx;
				background: #F7F7F7;
				border-radius: 36rpx;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
				line-height: 60rpx;
			}
		}

		.rank_tab {
			.rank_tab_item {
				width: 140rpx;
				height: 48rpx;
				background: #F3F3F3;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666666;
				line-height: 48rpx;
				text-align: center;
			}

			#select {
				background: #F1ECFE;
				color: #6B37E2;
			}
		}

		.tags {
			.tags_item {
				flex: 1;

				text {
					padding: 24rpx 0;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					margin: 10rpx 48rpx 10rpx 0;
				}

				#select {
					color: #131313;
				}
			}

			.time {
				/deep/ text {
					font-weight: 500;
					font-size: 24rpx;
					color: #6B37E2;
					line-height: 34rpx;
				}

				i {
					font-weight: 500;
					font-size: 24rpx;
					color: #131313;
					line-height: 34rpx;
					font-style: normal;
				}
			}
		}

		.rank_people {
			overflow: hidden;

			.left {
				overflow: hidden;
				flex: 1;

				.rank_index {
					width: 40rpx;
					font-size: 24rpx;
					color: #131313;
					text-align: center;
					flex-shrink: 0;
				}

				.avatar {
					width: 150rpx;
					height: 150rpx;
					position: relative;
					flex-shrink: 0;

					.lottie {
						width: 150rpx;
						height: 150rpx;
						position: absolute;
						top: 0;
						left: 0;
					}

					image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
					}
				}

				.nickname {
					overflow: hidden;
					flex: 1;

					.name {
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
						max-width: 100%;
					}

					.info {
						margin-top: 12rpx;
						overflow: hidden;
						max-width: 100%;

						.gender {
							/deep/ view {
								text {
									font-weight: bold !important;
								}
							}
						}

						.age {
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							margin: 0 16rpx 0 4rpx;
						}

						.address {
							font-size: 24rpx;
							color: #666666;
							flex: 1;
							max-width: 100%;
						}
					}
				}
			}

			.right {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
			}
		}

	}

	.toast {
		width: 640rpx;
		height: 60vh;
		background: linear-gradient(90deg, #D9F4FF 0%, #E8F1FD 54%, #F5E0FC 100%, #FAEBFF 100%);
		border-radius: 40rpx;
		padding: 48rpx 40rpx;

		.toast_title {
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
			line-height: 60rpx;
			padding-bottom: 24rpx;
		}

		.scroll {
			overflow: hidden;
			flex: 1;

			scroll-view {
				height: 100%;
			}

			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.h {
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.text {
				font-size: 26rpx;
				color: #333333;
				line-height: 42rpx;
			}

		}

		.toast_btn {
			margin-top: 48rpx;
			width: 400rpx;
			height: 96rpx;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}

		.red_btn {
			background: #FD2A53;

			text {
				color: #FFFFFF;
			}
		}

		.white_btn {
			background: #F1F1F1;

			text {
				color: #666666;
			}
		}


	}

	.apply {
		overflow: hidden;

		.item {
			padding: 16rpx 0;
			overflow: hidden;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
				margin-right: 24rpx;
			}

			.top {
				overflow: hidden;

				text {
					flex: 1;
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}
			}

			.bottom {
				overflow: hidden;
				margin-top: 6rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}

			.right {
				view {
					width: 96rpx;
					height: 40rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					text-align: center;
					margin-right: 16rpx;
				}

				.green {
					background: #E0FFE5;
					color: #10A927;
				}

				.red {
					background: #FFEAEE;
					color: #FD2A53;
				}
			}
		}
	}

	.rich-text {
		padding-right: 140rpx;

		text {
			font-size: 28rpx;
			color: #666666;
			margin-right: 16rpx;
		}
	}
</style>